<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>月结</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">


    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.css">
    <link href="//cdn.bootcss.com/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/skins/skin-blue.min.css">

    <script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/locale/zh-cn.js"></script>
    <script src="../../vendor/jquery/jQuery-2.2.0.min.js"></script>
    <script src="../../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <script src="../../vendor/bootstrap/js/daterangepicker.js"></script>
    <script src="../../address-resolver.js"></script>
    <script src="../../vendor/vue/vue.min.js"></script>
    <script src="../../Date-Format.js"></script>
    <script src="../../common.js"></script>
</head>

<body>
<div id="app" class="container-fluid">
    <label>租客基本信息：<br><br>
        <label>租赁房间号：{{roomNum}}</label>
        <label>客户姓名：{{customerName}}</label>
        <label>客户证件号码：{{identificationNumber}}</label>
        <label>客户电话：{{customerPhone}}</label><br><br>
    </label>


    <div class="form-group">
        <span>基本租金：</span>
        <input type="text" class="form-control" v-model="baseRent" placeholder="请输入基础房租" value="{{baseRent}}" disabled>
        <span>（单位：元）</span>
        <br><br>
    </div>


    <div class="form-group">
        <span>结算日期：</span>
        <input   type="text" class="form-control" v-model="dateOfHire" value="{{dateOfHire}}">-<input  name="daterange" id="daterange" type="text" class="form-control" v-model="endDate" value="{{endDate}}"><br><br>
    </div>


    <div class="form-group">
        <span>上月电表读数：</span>
        <input type="text" class="form-control" v-model="lastMeter"  value="{{lastMeter}}">
        <span>（单位：千瓦时）</span>
        <br><br>
    </div>


    <div class="form-group">
        <span>本月电表读数：</span>
        <input type="text" class="form-control" v-model="thisMeter" placeholder="请输入电表读数" value="{{thisMeter}}">
        <span>（单位：千瓦时）</span>
        <br><br>
    </div>


    <div class="form-group">
        <span>上月水表读数：</span>
        <input type="text" class="form-control" v-model="lastWater"  value="{{lastWater}}">
        <span>（单位：吨）</span>
        <br><br>
    </div>

    <div class="form-group">
        <span>本月水表读数：</span>
        <input type="text" class="form-control" v-model="" placeholder="请输入水表读数" value="">
        <span>（单位：吨）</span>
        <br><br>
    </div>

    <div class="form-group">
        <span>其他费用：</span>
        <input type="text" class="form-control" v-model="otherExpenses"  value="0.0">
        <span>（单位：元）</span>
        <br><br>
    </div>

    <div class="form-group">
        <span>其他费用说明：</span>
        <input type="text" class="form-control" v-model="otherInfo" placeholder="请输入费用说明" value="{{otherInfo}}">
        <br><br>
    </div>


    <div class="form-group">
        <span>租用网络：</span>
        <select v-model="isNetwork" value="{{isNetwork}}">
            <option>是</option>
            <option>否</option>
        </select><br/><br/>
    </div>



    <button type="submit" @click="submit" class="{{brand_button?'btn btn-default':'btn btn-default disabled' }}">提交
    </button>


</div>

<script>//首先使用一个闭包,防止污染全局对象


(function () {

    var Request = GetRequest();
    var dateFormat = 'YYYY-MM-DD';
    //定义页面的mvvm对象,用法参考 vuejs框架
    var vm = new Vue(
        {
            el: "#app",
            data: {
                roomNum: Request.roomName,//房间号
                customerName: Request.customerName,//客户名字
                identificationNumber: Request.customerId,//证件号
                customerPhone: Request.customerTel,//客户电话
                dateOfHire: Request.startDate,//起租日期
                isNetwork: Request.isNetwork,//是否使用网路
                baseRent: Request.basePayment,//基本房租
                endDate:moment().format(dateFormat),//结束日期
                lastMeter:'',//上月电表数
                thisMeter:'',//本月电表数
                lastWater:'',//上月水表数
                thisWater:'',//本月水表数
                otherExpenses:'',//其他费用
                otherInfo:''//其他费用说明
            },
            created: function () {

                var param={
                    roomNum:this.roomNum,
                    customerName:this.customerName
                }
                getDetails(param,function (data) {
                    this.identificationNumber=data.customerId;//证件号
                    this.customerPhone=data.customerTel;//客户电话
                    this.dateOfHire=(new Date(data.startDate)).Format("yyyy/MM/dd");//起租日期
                    if(data.hasNet){
                        this.isNetwork="是";
                    }else{
                        this.isNetwork="否";
                    }
                }.bind(this));//bind(this)是将返回值返给vm中data


                var p={
                    userId:"1",
                    roomNum:this.roomNum,
                    customerName:this.customerName
                };
                getPayMentList(p,function (data) {

                }.bind(this));
            },
            watch: {},
            methods: {
                submit: function () {
                    var hasNet;
                    if (this.isNetwork == "是") {
                        hasNet = true;
                    } else {
                        hasNet = false;
                    }
                    ;
                    var data = {
                        roomName: this.roomNum,
                        customerName: this.customerName,
                        customerId: this.identificationNumber,
                        customerTel: this.customerPhone,
                        startDate: this.dateOfHire,
                        hasNet: hasNet,
                        basePayment: this.baseRent,
                        deposit: this.deposit,
                        otherInfo: this.info
                    };

                    getRental(data, function () {
                        window.location.href = "../common/billing.html";
                    })
                },
                cancel: function () {
                    window.location.href = "../common/billing.html";
                }

            }

        });

    function getDetails(param, cp){
        $.get("/rental/details", param, cp);
    };
    function getPayMentList(param, cp) {
        $.get("/payment/list", param, cp);
    }

    function getList(param, cp) {
        $.get("/room/list", param, cp);
    }

    function getRental(param, cp) {
        $.post("/rental/add", param, cp);
    }

    $('input[name="daterange"]').daterangepicker({
        dateLimit: true,
        linkedCalendars: true,
        showRangesDatePicker: 1,
        showCustomDateLabel: true,

    }, function () {

    });

})();
</script>
</body>

</html>